<template>
  <div>
    <van-nav-bar @click-left="$router.back()">
      <template #left>
        <van-icon name="arrow-left" size="20" color="black" />
      </template>
      <template #title> 嗨购收银台 </template>
    </van-nav-bar>

    <div class="price">￥{{ price }}.<span class="fen">00</span></div>
    <div class="button">
      <van-button type="danger" size="large" round @click="onSubmit"
        >确认付款</van-button
      >
    </div>
    <van-password-input
      :value="value"
      :gutter="10"
      :error-info="errorInfo"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
      v-show="flag"
    />
    <van-number-keyboard
      v-model="value"
      :show="showKeyboard"
      @blur="showKeyboard = false"
    />
  </div>
</template>

<script>
import Vue from "vue";
import { Button, PasswordInput, NumberKeyboard, Dialog } from "vant";
import { deleteCartItem } from "../api/pay";
Vue.use(Button);
Vue.use(PasswordInput);
Vue.use(NumberKeyboard);
Vue.use(Dialog);
export default {
  data() {
    return {
      value: "",
      price: this.$route.params.price,
      showKeyboard: false,
      errorInfo: "",
      flag: false,
    };
  },
  methods: {
    onSubmit() {
      deleteCartItem({ userid: localStorage.getItem("userid") }).then(
        (data) => {
          console.log(data);
        }
      );
      Dialog.confirm({
        title: "是否支付",
      })
        .then(() => {
          this.flag = true;
        })
        .catch(() => {
          this.$router.push("/cart");
        });
    },
  },
  watch: {
    value(value) {
      if (value.length === 6 && value === "123456") {
        this.errorInfo = "";
        this.$router.push("/payed");
      } else if (value.length != 6) {
        this.errorInfo = "";
      } else {
        this.errorInfo = "密码错误";
      }
    },
  },
};
</script>

<style scoped>
.price {
  text-align: center;
  font-size: 40px;
  color: red;
  margin-top: 50px;
}
.fen {
  font-size: 20px;
}
.button {
  margin-top: 80px;
  padding: 0 20px;
}
</style>